import React, { useState, useEffect } from 'react';
import styles from './index.less';
import cls from 'classnames';
import { CloseSquareOutlined, EditOutlined } from '@ant-design/icons';
import DeviceInfoEdit from './deviceInfoEdit';
import { connect } from 'umi';
import { getEquipmentsByProjId } from '@/services/modelManageService';

const DeviceInfo = ({ curProjId }) => {
  const [isEdit, setIsEdit] = useState(false);
  const [equipmentList, setEquipmentList] = useState([]);

  useEffect(() => {
    if (!curProjId) return;
    _getEquipmentsByProjId();
  }, []);

  async function _getEquipmentsByProjId() {
    const { data } = await getEquipmentsByProjId(curProjId);
    setEquipmentList(data || []);
  }
  return (
    <div className={cls('border-box', styles.deviceInfo)}>
      <p className={styles.title}>
        工程设备信息
        <span className={styles.titleBtn} onClick={() => setIsEdit(true)}>
          <EditOutlined /> 编辑
        </span>
      </p>
      {!!equipmentList.length &&
        equipmentList.map(e => {
          return (
            <div key={e.objectId} className={styles.deviceInfoItem}>
              <p className={styles.deviceInfoItemTitle}>{e.name}</p>
              <span className={styles.deviceInfoWorking}>{e.online}</span>
              <span className={styles.deviceInfoNonWorking}>{e.offline}</span>
            </div>
          );
        })}
      {isEdit && (
        <DeviceInfoEdit
          code={curProjId}
          data={equipmentList}
          onClose={() => setIsEdit(false)}
          onRefresh={_getEquipmentsByProjId}
        />
      )}
    </div>
  );
};

// export default DeviceInfo;
export default connect(({ app }) => {
  return { curProjId: app.curProjId };
})(DeviceInfo);
